<template>
    <view class="xilu">
        <view class="page-foot bg-white" @click="formSubmit()">
            <view class="btn1">确定修改</view>
        </view>
        <view class="container plr30 pt30">
            <!--  -->
            <view class="fs34 col10 fwb pb30">基本信息</view>
            <view class="xilu_up_box">
                <u-upload :fileList="fileListAvatar" @afterRead="afterRead" @delete="deletePic" name="avatar" multiple :maxCount="1" width="130" height="130">
                    <view class="xilu_upbox">
                        <image :src="userinfo.avatar" mode="aspectFill" style="width: 130rpx;height: 130rpx;border-radius: 50%;position: relative;z-index: 1;">
                        </image>
                    </view>
                </u-upload>
            </view>
            <view class="flex-box flex-between pb70">
                <view class="fs30 col5">昵称</view>
                <input type="text" placeholder="请输入昵称" v-model="userinfo.nickname" placeholder-class="cola" class="fs30 tr" />
            </view>
            <view class="flex-box flex-between pb70">
                <view class="fs30 col5">手机号码</view>
                <input type="text" placeholder="请输入手机号码" disabled="true" :value="userinfo.mobile" placeholder-class="cola" class="fs30 tr" />
            </view>
            <view class="fs30 col5">个人简介</view>
            <view class="xilu_textbox">
                <textarea v-model="userinfo.bio" maxlength="100" cols="30" rows="10"></textarea>
                <view class="fs24 col89 tr">限100个字</view>
            </view>
            <!--  -->
            <view class="flex-box flex-between pb30 col10">
                <view class="fs34 fwb ">认证信息</view>
                <view class="fs28" v-if="userinfo.auth">
                    <text v-if="userinfo.auth.check_status==0">审核中</text>
                    <text v-else-if="userinfo.auth.check_status==2" class="red" @click="bindReason()">已拒绝(查看原因)</text>
                    <text v-if="userinfo.auth.check_status==1" class="green">已通过</text>
                </view>
            </view>
            <template v-if="userinfo.auth">
				<view class="flex-box flex-between pb70">
				    <view class="fs30 col5">姓名</view>
				    <input type="text" placeholder="请输入姓名" disabled="true" v-model="userinfo.auth.username" placeholder-class="cola" class="fs30 tr" />
				</view>
				<view class="flex-box flex-between pb70">
				    <view class="fs30 col5">身份证号码</view>
				    <input type="text" placeholder="请输入身份证号码" disabled="true" v-model="userinfo.auth.idcard_no" placeholder-class="cola" class="fs30 tr" />
				</view>
				<!-- <view class="fs30 col5 pb30">身份证正反面</view>
				<view class="flex-box flex-between tc pb50">
				    <view>
				        <image :src="userinfo.auth?userinfo.auth.idcard_back_image:'../../static/icon/up_id1.png'" mode="aspectfill" style="width: 325rpx;height: 210rpx;"></image>
				        <view class="fs24 col5 pt25">身份证国徽面</view>
				    </view>
				    <view>
				        <image :src="userinfo.auth?userinfo.auth.idcard_face_image:'../../static/icon/up_id1.png'" mode="aspectfill" style="width: 325rpx;height: 210rpx;"></image>
				        <view class="fs24 col5 pt25">身份证人像面</view>
				    </view>
				</view> -->
			</template>
            
			<template v-else>
				<view class="fs30 tc col10">您还未认证，是否前往认证</view>
				<view class="btn2 tc" @click="bindAuth()">去认证</view>
			</template>

        </view>
    </view>
</template>

<script>
    var validate = require("../../xilu/validate.js");
    export default {
        data() {
            return {
                fileListavatar: [],
                fileListimages: [],
                fileListimages2: [],
                userinfo: {
                    avatar: '',
                    nickname: '',
                    mobile: '',
                    auth: {
                        username: '',
                        idcard_type: 1,
                        idcard_no: '',
                    }
                },
            };
        },
        onLoad() {
            this.getUserinfo();
        },
        methods: {
            getUserinfo() {
                this.$core.get({
                    url: 'xilumarket.user/profile',
                    data: {},
                    loading: false,
                    success: ret => {
                        // if (ret.data.auth) {
                        //     this.fileListimages = [{
                        //         status: 'success',
                        //         message: '',
                        //         url: ret.data.auth.idcard_back_image
                        //     }];
                        //     this.fileListimages2 = [{
                        //         status: 'success',
                        //         message: '',
                        //         url: ret.data.auth.idcard_face_image
                        //     }];
                        // } else {
                        //     ret.data.auth = {
                        //         username: '',
                        //         idcard_no: '',
                        //         idcard_type: 1
                        //     }
                        // }
                        this.userinfo = ret.data;
                    },
                    fail: err => {
                        console.log(err);
                    }
                });
            },

            // 新增图片
            async afterRead(event) {
                // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
                let lists = [].concat(event.file)
                let fileListLen = this[`fileList${event.name}`].length
                lists.map((item) => {
                    this[`fileList${event.name}`].push({
                        ...item,
                        status: 'uploading',
                        message: '上传中'
                    })
                })
                for (let i = 0; i < lists.length; i++) {
                    const result = await this.uploadFilePromise(lists[i].url)
                    let item = this[`fileList${event.name}`][fileListLen]
                    this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
                        status: 'success',
                        message: '',
                        url: result
                    }))
                    this.userinfo.avatar = result;
                    fileListLen++
                }
            },
            uploadFilePromise(filepath) {
                let page = this;
                return new Promise((resolve, reject) => {
                    page.$core.uploadFile({
                        filePath: filepath,
                        success: (ret, response) => {
                            resolve(ret.data.url)
                        }
                    })
                })
            },
			bindAuth(){
				uni.navigateTo({
					url: "/pages/certificate_info/certificate_info",
					success(res) {
						res.eventChannel.emit('authTransfor', {})
					}
				})
			},
			bindReason(){
				let that = this;
				let auth = this.userinfo.auth;
				uni.showModal({
					title:"提示",
					content: auth.check_reason,
					confirmText:'重新申请',
					success(res) {
						if(res.confirm){
							that.bindAuth()
						}
					}
				})
			},

            //提交
            formSubmit() {
                let formData = {
                    avatar: this.userinfo.avatar,
                    nickname: this.userinfo.nickname,
                    bio: this.userinfo.bio,
                    //username: this.userinfo.auth.username,
                    //idcard_type: this.userinfo.auth.idcard_type,
                    //idcard_no: this.userinfo.auth.idcard_no,
                };

                // let idcard_face_image = '',
                //     idcard_back_image = '';
                // this.fileListimages.forEach(item => idcard_back_image = item.url);
                // this.fileListimages2.forEach(item => idcard_face_image = item.url);
                // formData.idcard_face_image = idcard_face_image;
                // formData.idcard_back_image = idcard_back_image;

                var rule = [{
                        name: 'avatar',
                        nameChn: '头像',
                        rules: ['require'],
                        errorMsg: {
                            require: '请上传头像'
                        }
                    },
                    {
                        name: 'nickname',
                        nameChn: '昵称',
                        rules: ['require'],
                        errorMsg: {
                            require: '请填写昵称'
                        }
                    },
                    {
                        name: 'bio',
                        nameChn: '简介',
                        rules: ['require', 'length:1,100'],
                        errorMsg: {
                            require: '请填写简介',
                            length: '字数在100以内'
                        }
                    },
                    // {
                    //     name: 'username',
                    //     nameChn: '姓名',
                    //     rules: ['require'],
                    //     errorMsg: {
                    //         require: '请填写姓名'
                    //     }
                    // },
                    //{name: 'idcard_type',nameChn: '证件类型',rules: ['require'],errorMsg: {require: '请选择证件类型'}},
                    // {
                    //     name: 'idcard_no',
                    //     nameChn: '证件号',
                    //     rules: ['require'],
                    //     errorMsg: {
                    //         require: '请填写证件号'
                    //     },
                    // },
                    // {
                    //     name: 'idcard_face_image',
                    //     nameChn: '身份证人像',
                    //     rules: ['require'],
                    //     errorMsg: {
                    //         require: '请上传身份证人像照'
                    //     },
                    // },
                    // {
                    //     name: 'idcard_back_image',
                    //     nameChn: '身份证国徽',
                    //     rules: ['require'],
                    //     errorMsg: {
                    //         require: '请上传身份证国徽照'
                    //     },
                    // },
                ];
                // 是否全部通过，返回Boolean
                //console.log(validate.check(formData,rule),validate.getError(),formData);

                if (!validate.check(formData, rule)) {
                    uni.showToast({
                        title: validate.getError()[0],
                        icon: 'none'
                    });
                    return;
                }
                this.$core.post({
                    url: 'xilumarket.user/profile',
                    data: formData,
                    success: ret => {
                        let userinfo = this.$core.getUserinfo();
                        console.log(userinfo);
                        userinfo.avatar = ret.data.avatar;
                        userinfo.nickname = ret.data.nickname;
                        uni.$emit("user_update", {})
                        uni.navigateBack({});
                        uni.showToast({
                            title: '提交成功',
                            icon: 'none'
                        });
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .xilu {
        &_upbox {
            width: 130rpx;
            height: 130rpx;
            border-radius: 50%;
            position: relative;
            overflow: hidden;

            &::after {
                content: "";
                display: block;
                width: 130rpx;
                height: 130rpx;
                background: rgba(0, 0, 0, 0.4);
                position: absolute;
                top: 0;
                left: 0;
                text-align: center;
                z-index: 2;
            }

            &::before {
                content: "更换头像";
                width: 60rpx;
                height: 80rpx;
                font-size: 30rpx;
                font-weight: 400;
                color: #FFFFFF;
                line-height: 40rpx;
                position: absolute;
                top: 25rpx;
                left: 0;
                right: 0;
                z-index: 3;
                margin: 0 auto;
            }
        }

        &_up_box {
            width: 130rpx;
            height: 130rpx;
            margin: 0 auto 40rpx;
        }

        &_textbox {
            width: 690rpx;
            border-radius: 20rpx;
            background: #f7f9fc;
            margin: 30rpx 0 70rpx;
            padding: 20rpx 30rpx;

            textarea {
                height: 130rpx;
                width: 630rpx;
            }
        }

        .btn2 {
            width: 200rpx;
            height: 70rpx;
            line-height: 68rpx;
            display: block;
            margin: 30rpx auto 0;
        }
    }
</style>